<template>
    <div class="dashboard-editor-container">
        <panel-group
            :cars="cars"
            :admin-number="adminNumber"
            :work-number="workNumber"
            :salary="salary"
            @handleSetLineChartData="handleSetLineChartData"
        />

        <el-row :gutter="32">
            <el-col :span="12" class="card-box">
                <el-card style="padding-bottom: 18px;">
                    <div slot="header"><span>公司宣传</span></div>
                    <el-carousel indicator-position="outside">
                        <el-carousel-item
                            v-for="item in images"
                            :key="item.url"
                        >
                            <img :src="item.url" />
                        </el-carousel-item>
                    </el-carousel>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>现场人员</span></div>
                    <div class="chart-wrapper">
                        <pie-chart
                            ref="people"
                            v-show="peoplePieLine.length > 0"
                        />
                        <div
                            v-show="peoplePieLine.length == 0"
                            class="nulldata"
                        >
                            <img
                                src=""
                            />
                            <div>暂无数据</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32">
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>公司简介：</span></div>
                    <div class="chart-wrapper cominfo">
                        {{ desc }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>现场车辆</span></div>
                    <div class="chart-wrapper">
                        <pie-chart ref="car" v-show="carPieLine.length > 0" />
                        <div v-show="carPieLine.length == 0" class="nulldata">
                            <img
                                src=""
                            />
                            <div>暂无数据</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
    </div>
</template>

<script>

import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

import { getHomeData } from "../api/system/system";
const lineChartData = {
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    }
}
export default {
    created () {
        this.getData();
    },
    name: 'Index',
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart
    },
    data () {
        return {
            loading: true,
            desc: "",
            carPie: [],
            carPieLine: [],
            peoplePie: [],
            peoplePieLine: [],
            images: [],
            adminNumber: "",
            cars: "",
            salary: "",
            workNumber: "",
            lineChartData: lineChartData.newVisitis,
            item: ''
        }
    },
    methods: {
        /** 提交按钮 */
        getData: function () {
            this.loading = true;
            getHomeData().then(response => {
                if (response.code === 200) {
                    let certImgArr = response.data.images;
                    this.desc = response.data.desc;
                    certImgArr.forEach(item => {
                        this.images.push({
                            url: item.attaPath
                        })
                    });
                    let sceneCars = response.data.sceneCars;
                    sceneCars.forEach(item => {
                        this.carPie.push({
                            value: item.count,
                            name: item.name
                        });
                        this.carPieLine.push(item.name)
                    });
                    let scenePeople = response.data.scenePeople;
                    scenePeople.forEach(item => {
                        this.peoplePie.push({
                            value: item.count,
                            name: item.name
                        });
                        this.peoplePieLine.push(item.name)
                    });
                    this.$nextTick(() => {
                        this.$refs.car.initChart(this.carPieLine, this.carPie);
                        this.$refs.people.initChart(this.peoplePieLine, this.peoplePie);
                    })
                    this.adminNumber = response.data.adminNumber;
                    this.workNumber = response.data.workNumber;
                    this.cars = response.data.cars;
                    this.salary = response.data.salary;
                }
                this.loading = false;
            });
        },
        handleSetLineChartData (type) {
            this.lineChartData = lineChartData[type]
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    padding-top: 10px;
    
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

.cominfo {
    color: #999;
    line-height: 40px;
    height: 316px;
}

@media screen and (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
    .cominfo {
        line-height: 33px !important;
    }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}
.nulldata {
    height: 300px;
    text-align: center;
    padding-top: 30px;
    color: #999;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
